<style lang="less" scoped>
 @import url('mainTbl.less');
</style>

<template>
<div class="main-container fcol">
  <div class="query-form">
    <slot name="query"></slot>
  </div>
  <div class="tbl-container">
    <div class="action-bar">
      <slot name="actionbar"></slot>
    </div>
    <!-- <Alert v-if="showActionBar">
      <span v-if="select" class="selection-action">
        已选择<strong>{{selectNum}}</strong>项
        <span
          class="form-action-btn"
          @click="$refs.tbl.selectAll(false)"
        >清空</span>
      </span>
      <slot name="actionbar"></slot>
      </Alert> -->
    <Table
     ref="tbl"
     :key="key"
     class="main-tbl"
     border
     :columns="cols"
     :data="data"
     @on-selection-change="handleSelect"></Table>
    <Page
      class="page"
      v-if="showPage"
      :total="total"
      :page-size="pageSize"
      :current="current"
      show-sizer
      show-elevator
      show-total
      @on-change="p => $emit('on-change', p)"
      @on-page-size-change="size =>$emit('on-page-size-change', size)"
    />
  </div>
</div>

</template>

<script>
import util from '@/libs/util'

export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    index: {
      type: Boolean,
      default: false
    },
    select: {
      type: Boolean,
      default: false
    },
    showPage: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    showActionBar: {
      type: Boolean,
      default: true
    },
    indexFixed: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      key: new Date().valueOf(), // 用于强制重绘表格
      selectNum: 0
    }
  },
  computed: {
    cols () {
      let cols = [...this.columns]
      if (this.index) cols.splice(0, 0, { type: 'index', title: '序号', width: window.$config.columnWidth.ca, align: 'center', fixed: this.indexFixed === true ? 'left' : '' })
      if (this.select) cols.splice(0, 0, { type: 'selection', width: window.$config.columnWidth.ca, align: 'center', fixed: this.indexFixed === true ? 'left' : '' })
      return cols
    }
  },
  created () {
    util.bus.$on('on-expand', expand => {
      if (expand) {
        this.key = new Date().valueOf()
      }
    })
  },
  methods: {
    handleSelect (e) {
      // this.selectNum = rows.length
      this.$emit('handleSelect', e)
    }
  },
  destroyed () {
    util.bus.$off('on-expand')
  }
}
</script>
